<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>bootstrap表单的使用作业（11.23）.html</title>
    <style>
        #box{
            margin-top: 10px;
            width:100%;
            height: 500px;
            border: 1px solid black;
            display:flex;
        }
        #left{
            width:40%;
            height: 100%;
            /* border: 1px solid yellowgreen; */
            /* position: relative; */
            /* display:block; */
        }
        #right{
            width: 60%;
            height: 100%;
            /* border: 1px solid red; */
            /* float: right； */
            
        }
    </style>
</head>
<body>
    <div id="box" class="container" >
        <div id="left">
            <h2>Font Awesome 图标</h2>
            <i class="fa fa-car"></i>
            <i class="fa fa-car fa-3x"></i>
            <i class="fa fa-car" style="font-size:80px;"></i>
            <i class="fa fa-car" style="font-size:160px;color:red;"></i>

            <ul class="fa-ul">
                <li><i class="fa-li fa fa-check-square"></i>你好，小向同学</li>
                <li><i class="fa-li fa fa-spinner fa-spin"></i>你好，小向同学</li>
                <li><i class="fa-li fa fa-square"></i>你好，小向同学</li>
            </ul>
            <h2>多图叠加</h2>
            <span class="fa-stack fa-lg">
                <!-- 圈圈 -->
                <i class="fa fa-circle-thin fa-stack-2x "></i>
                <!-- fa-inverse -->
                <!-- 小鸟 -->
                <i class="fa fa-twitter fa-stack-1x "></i>
            </span>
                fa-twitter on fa-circle-thin<br>
        
            <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
            </span>
                fa-twitter (inverse) on fa-circle<br>
            
            <span class="fa-stack fa-lg">
                <i class="fa fa-camera fa-stack-1x"></i>
                <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
            </span>
                fa-ban on fa-camera
        </div>
        <div id="right">
            <h2>水平表单</h2>
            <form >
                <div class="row">
                    <label for="username" class="col-md-2 text-center" >账号</label>
                    <div class="col-md-7">
                        <input type="text" id="username" class="form-control" placeholder="请输入账号："></input>
                    </div>
                </div>
    
                <div class="row">
                    <label for="pass" class="col-md-2 text-center" >密码</label>
                    <div class="col-md-7">
                        <input type="password" id="pass" class="form-control" placeholder="请输入密码："></input>
                    </div>
                </div>
    
                <div class="row mt-1">
                    <div class="col-md-1  offset-md-1">
                        <!-- <button class="btn btn-primary  active">登录</button> -->
                    </div>
                    
                </div>
                
            </form>
            <h2>文本域</h2>
            <form >
                <div class="form-group">
                    <label for="content">评论：</label>
                    <textarea class="form-control" rows="8" id="content" name="content" ></textarea>
                </div>
                <button class="btn btn-primary  active text-a" >登录</button>
            </form>

        </div>
    </div>
</body>
</html>